\documentclass[supercite]{Experimental_Report}

\title{~~~~~~新生实践课~~~~~~}
\author{吴博浪}
%\coauthor{张三、李四}
\school{计算机科学与技术学院}
\classnum{CS2106}
\stunum{U202113915}
%\costunum{U202115631、U202115631}
\instructor{陈加忠} % 该系列实验报告模板由华科大计院教师陈加忠制作
\date{2024年11月15日}

\usepackage{algorithm, multirow}
\usepackage{algpseudocode}
\usepackage{amsmath}
\usepackage{amsthm}
\usepackage{framed}
\usepackage{mathtools}
\usepackage{subcaption}
\usepackage{xltxtra} %提供了针对XeTeX的改进并且加入了XeTeX的LOGO, 自动调用xunicode宏包(提供Unicode字符宏)
\usepackage{bm}
\usepackage{tikz}
\usepackage{tikzscale}
\usepackage{pgfplots}
%\usepackage{enumerate}

\pgfplotsset{compat=1.16}

\newcommand{\cfig}[3]{
  \begin{figure}[htb]
    \centering
    \includegraphics[width=#2\textwidth]{images/#1.tikz}
    \caption{#3}
    \label{fig:#1}
  \end{figure}
}

\newcommand{\sfig}[3]{
  \begin{subfigure}[b]{#2\textwidth}
    \includegraphics[width=\textwidth]{images/#1.tikz}
    \caption{#3}
    \label{fig:#1}
  \end{subfigure}
}

\newcommand{\xfig}[3]{
  \begin{figure}[htb]
    \centering
    #3
    \caption{#2}
    \label{fig:#1}
  \end{figure}
}

\newcommand{\rfig}[1]{\autoref{fig:#1}}
\newcommand{\ralg}[1]{\autoref{alg:#1}}
\newcommand{\rthm}[1]{\autoref{thm:#1}}
\newcommand{\rlem}[1]{\autoref{lem:#1}}
\newcommand{\reqn}[1]{\autoref{eqn:#1}}
\newcommand{\rtbl}[1]{\autoref{tbl:#1}}

\setlength{\textfloatsep}{10pt plus 2pt minus 2pt}

\algnewcommand\Null{\textsc{null }}
\algnewcommand\algorithmicinput{\textbf{Input:}}
\algnewcommand\Input{\item[\algorithmicinput]}
\algnewcommand\algorithmicoutput{\textbf{Output:}}
\algnewcommand\Output{\item[\algorithmicoutput]}
\algnewcommand\algorithmicbreak{\textbf{break}}
\algnewcommand\Break{\algorithmicbreak}
\algnewcommand\algorithmiccontinue{\textbf{continue}}
\algnewcommand\Continue{\algorithmiccontinue}
\algnewcommand{\LeftCom}[1]{\State $\triangleright$ #1}

\newtheorem{thm}{定理}[section]
\newtheorem{lem}{引理}[section]

\colorlet{shadecolor}{black!15}

\theoremstyle{definition}
\newtheorem{alg}{算法}[section]

\def\thmautorefname~#1\null{定理~#1~\null}
\def\lemautorefname~#1\null{引理~#1~\null}
\def\algautorefname~#1\null{算法~#1~\null}

\begin{document}

\maketitle

\clearpage

\pagenumbering{Roman}

\tableofcontents[level=2]

\clearpage

\pagenumbering{arabic}

\section{网页整体框架}

我制作的网络页面的主题是：小新幸福的一家；
《蜡笔小新》动画片几乎陪伴了我一整个童年，所以我想借这个机会
描绘一下小新幸福的一家！

整个网页的整体层次结构如图 \ref{frame} 所示。其中值得注意的是：
主页面和每个分页全都进行了打通，即任何一个页面都可以一步到达其他任意一个页面，毕竟他们是相亲相爱的一家人呢！

具体每个页面的设计将放到各自页面的章节中进行介绍。

\begin{figure}[htb] % here top bottom
	\begin{center}
		\includegraphics[scale=0.8]{images/0.png}
		\caption{网页整体框架}
		\label{frame}
	\end{center}
\end{figure}


\newpage

\section{主页设计}

主页是小新的个人介绍页面，其实际页面如图 \ref{xiaoxin} 所示

\begin{figure}[htb] % here top bottom
	\begin{center}
		\includegraphics[scale=0.25]{images/xiaoxin.png}
		\caption{小新个人主页}
		\label{xiaoxin}
	\end{center}
\end{figure}

其中主页的 HTML 核心逻辑如图 \ref{fig1} 所示；
值得说明的是，其中的每一个填色方块都代表了 html 源码中的一个 <div> 方块
整个网页中，我一共使用了 6 个 div 块，对应框架图中的 6 种不同的颜色。
其中 div 块并非简单的并列堆叠，而是互相嵌套，模块化分装，以确保每个 div 的功能明确，
以便能对网页有更好的掌控力和让页面有更好的呈现效果。

\begin{figure}[h] % here top bottom
	\begin{center}
		\includegraphics[scale=0.4]{images/1.png}
		\caption{主页 HTML 结构图}
		\label{fig1}
	\end{center}
\end{figure}

与图 \ref{fig1} 相应的是其的代码部分。在代码上，我采用了“类标签”的方式来将模块逻辑与 CSS 样式进行分开，
使得在实际代码编写过程中更加的清晰，不容易混乱。其中代码的 <div> 逻辑部分如图 \ref{code} 所示：


\begin{figure}[h] % here top bottom
	\begin{center}
		\includegraphics[scale=0.4]{images/code.png}
		\caption{主页 HTML 核心逻辑代码}
		\label{code}
	\end{center}
\end{figure}

同时，值得注意的是 “我的独白” 部分。我一开始在“我的独白”
部分也只是简单的用 <p> 标签标注独白的内容，但是发现呈现的效果
很平淡，也无法突出整个网页的重点。考虑到 “我的独白” 部分是整个网页的重点部分，
所以我重新又用了一个新的 <div> 块将其进行包围，并且设置一定的底色与透明度，使其变得协调且突出。

另一个值得称赞的亮点是 网页的跳转部分。页面下方的四个圆形成员照片就是跳转各自主页的途经。
值得称赞的是，当鼠标悬停在图片上的时候，图片会稍稍变大，呈现一个悬浮选中的效果，这也是我从其他常见的热门主页学到的小技巧，这使得网页更灵动了。


\newpage

\section{分页面设计}

\subsection{分页面1 - 野原美伢个人介绍页}

分页面1 是小新的妈妈——野原美伢的个人介绍页。其实际页面如图 \ref{meiya} 所示：

\begin{figure}[h] % here top bottom
	\begin{center}
		\includegraphics[scale=0.29]{images/meiya.png}
		\caption{野原美伢个人介绍页实际效果}
		\label{meiya}
	\end{center}
\end{figure}

小新妈妈的分页面与小新主页最大的不同在于：在小新的整体页面框架下，在最外面又加了一个 <div>，
这个 <div> 包含了一张图片做背景，使整个页面会更加丰富。

还有个有意思的彩蛋是：由于小新经常调皮，小新妈妈会在小新的头上揍出一个大包，所以下面跳转小新的图片上选择了一张小新被打出大包、很无奈的表情。

为了使整个网站更有意思，每个页面的跳转图片都花有额外的一点小小的心思！

其他部分和小新的主页基本相同，不再过多赘述。

\newpage

\subsection{分页面2 - 野原广志个人介绍页}

分页面2 是小新的爸爸——野原广志的个人主页。其页面实际效果如图 \ref{guangzhi} 所示：

\begin{figure}[h] % here top bottom
	\begin{center}
		\includegraphics[scale=0.29]{images/guangzhi.png}
		\caption{野原广志个人介绍页实际效果}
		\label{guangzhi}
	\end{center}
\end{figure}

由于其设计与野原美伢的主页基本相似，故不再过多赘述。

\newpage

\subsection{分页面3 - 野原向日葵个人介绍页}

分页面2 是小新的妹妹——野原向日葵的个人主页。其页面实际效果如图 \ref{xiaokui} 所示：

\begin{figure}[h] % here top bottom
	\begin{center}
		\includegraphics[scale=0.29]{images/xiaokui.png}
		\caption{小葵个人介绍页实际效果}
		\label{xiaokui}
	\end{center}
\end{figure}

这里有个小彩蛋是：由于小葵未满一岁，还不会说话，只会咿呀咿呀，所以在个人
独白这里，也采用小孩子的 “咿呀” 的方式。小葵当然是对自己的爸爸妈妈和哥哥做出了评价的，这是我们这些
大人听不懂而已。

其他设计与野原美伢的主页基本相似，故不再过多赘述。

\newpage

\subsection{分页面4 - 野原小白个人介绍页}

分页面2 是小新养的小狗——野原小白的个人主页。其页面实际效果如图 \ref{xiaobai} 所示：

\begin{figure}[h] % here top bottom
	\begin{center}
		\includegraphics[scale=0.29]{images/xiaobai.png}
		\caption{小白个人介绍页实际效果}
		\label{xiaobai}
	\end{center}
\end{figure}

由于其设计与野原美伢的主页基本相似，故不再过多赘述。

\newpage

\section{网页设计小结}

在网页设计时，我没有选择使用 DreamWeaver 软件来设计，我认为这样设计出来的
网页会比较沉闷。

所以索性我就尝试去菜鸟教程网站简单学习了 HTML 语言和 CSS 语言，并设计了这些网页。

最开始总是不想开始设计，有畏难情绪。但是慢慢的设计出第一个，第二个，到最后一个小白的网页设计完的时候，
心中很激动，发现原来我也可以设计出有点模样的网站。

这个设计中一切进展的都比较顺利，较为圆满的完成了整个设计。

\newpage

\section{课程的收获和建议}

由于大一的时候很遗憾没有修新生实践课，现在大四有时间了，回来补修这门课，感想不能说多，但是也不少。我想以一个大四学生的视角谈谈这门课。

我基本上每节课都听的八九不离十，以我大四同学的视角来说，
整门课所教授的东西大多都是极有用的，像 git ，python 等工具，在整个大学四年的学习生涯中都是极有帮助的。
但是这也恰恰是这门课最大的问题！

首先是学习方式。我们知道，工具是为了解决某个特定的问题而出现的，
但是由于大一的同学们对计算机相关的东西，尤其是工程方面的东西接触不多，
很多同学是无法理解像 git 等工具是有什么作用的，这往往会导致同学们
学习的过程中积极性不高，而且也常常理解不了里面的很多细节，作业也都是抄的某几个大佬的，或者直接问 AI。

其次是难度。以我大四同学的视角来说，可能我比较菜，但是我自己代入现在刚上大学的新生，
老师教的内容难度过高了！或者说一个很重要的工具或者知识点，2个小时左右就讲完了，
囫囵吞枣，同学们很难接受！我甚至认为这门课的难度可以排进前几。

拿 git 举例，我当时是因为软件工程课程要使用 git ，然后自己去网上了解和学习了 git 工具，知道了
它能解决我什么问题，并且我搜了网上高质量的视频学习 git ，这才勉强理解了其中很重要的工作区、节点、树结构等关键概念，
并且在后面不断使用中也对其有了更深的理解。

而在实际上课过程中，这些内容似乎没有提及或者一带而过，只是讲解了一下 git 的命令使用。

我身边坐的大一的同学都表示听不懂，最后我花了 20 分钟形象解释和 10 分钟手把手实操，才把周围的几个新同学教的勉勉强强。
他们普遍表示仅仅听完课后就是懵懵的，大脑几乎一片空白。

当然，这也有个好处是，培养了同学们课前预习、课下学习的能力，这也是计算机专业很重要的一项能力。
我认为在当前难度和授课时长下，新生不提前课下学这些内容，上课一定是懵的，毫无疑问，95\% 的同学都是这样。

所以我认为，可以适当增加像 git 等工具的教学时长，同时让同学们上课前尝试（或者说必须）去预习，像
B 站上有很多教的很好的视频，能一定上缓解现有问题。

语文能力较差，逻辑不是很清晰，但都是真实感想。一些拙见，主观性较强，说的不好的、不合理的老师您忽略即可，但是绝对没有恶意。

\subsection{计算机基础知识}

介绍了一些与计算机领域相关的知识，放在第一节课是合适的。

\subsection{文档撰写工具LaTeX}

很有用的工具，但是应该建议同学们提前预习一下，不然上课听完课立马做课堂作业，很难有新生能完成。

\subsection{编程工具Python}

大一新生还在学着 C 语言，Python 的很多语法和基本理念和 C 的相差较大，同学们容易迷糊，尤其是一门语言还没学好的情况下，又来一门。

Python 很好，但是似乎可以尝试把新生实践课放在大一下学期，这样会更好。

\subsection{版本管理软件Git}

建议让同学们课前去预习，看看网上播放量很高的视频，讲的很好。课上几乎没有介绍 git 的一些基本概念（工作区、暂存区、分支、树结构），而是直接教的命令，这样不好。

\subsection{网页制作Dreamweaver}

似乎是一个美工工具，我没有去学，因为之前有了前端的一些知识，所以是直接手写的 HTML 。
当然新生们由于没有学习计网，可能不能理解网页是怎么来，为什么编写的 HTML 代码在网页上呈现成了这个样子。

应该告诉同学们，浏览器里面内置了 HTML 的解析器和渲染器，我们将写好的代码发给浏览器，然后浏览器解析后出现了大家看到的页面。

\end{document}